<template>
  <div class="h-100 d-flex flex-column justify-content-between" style="background-color: #efeff4;">
    <main class="text-center" v-show="activity && activity.activityStatus === 'END'">
      <div class="mt-5">
        <i class="el-icon-warning icon-msg-warning"></i>
      </div>
      <div class="mt-3">
        <h5>活动已结束，尚未报名参加</h5>
      </div>
    </main>
    <main class="span p-3 mb-5" v-show="!(activity && activity.activityStatus === 'END')">
      <div class="card flex-row" :class="{'is-sign border': item.ctime}" v-for="(item, index) in participants" :key="index" style="border: 1px solid #94c05a;border-radius: 0;margin-bottom: 15px;">
        <ul class="list-group list-group-flush">
          <li class="list-group-item weui-cell" :class="{'validate-err': errors.has('participants_name_' + index)}">
            <label>姓名</label>
            <input type="text" v-model="item.name" required :readonly="item.ctime" v-validate="'required|max:10'" :data-vv-name="'participants_name_' + index">
          </li>
          <li class="list-group-item weui-cell" :class="{'validate-err': errors.has('participants_phone_' + index)}">
            <label>联系方式</label>
            <input type="text" v-model="item.phone" required :readonly="item.ctime" v-validate="'required|fax'" :data-vv-name="'participants_phone_' + index">
          </li>
          <li class="list-group-item weui-cell" v-if="!item.ctime || item.remark">
            <label>备注</label>
            <input type="text" v-model="item.remark" :readonly="item.ctime">
          </li>
        </ul>
        <div v-if="!item.ctime && participants.length > 1"  class="d-flex align-items-center justify-content-center" @click="deleteItem(item, index)"
          style="width: 35px;background: #94c05a;color: #FFF;" >
          <i class="el-icon-delete"></i>
        </div>
      </div>
      <div class="add-sign" @click="addItem()" v-show="participants[0] && !participants[0].ctime">
        <i class="el-icon-plus"></i>
        新增参加活动人员
      </div>
    </main>
    <el-button type="success" class="btn-fixed-bottom"  style="font-size: 20px;"
      v-show="fotter && !(activity && activity.activityStatus === 'END') && participants[0] && !participants[0].ctime" @click="confirm">提交报名</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'

let gen = async function (self) {
  // 获取报名状态
  let signRes = await axios.post('/mscs/activity/findUserActivitySignStatus',
  self.$paramsConvert({userId: self.$store.state.user.user.user.userId, activityId: self.activityId}))
  if (signRes.data.data === 'SUBMIT') { // 已经报过名的
    let res = await axios.post('/mscs/activity/findUserSignActvivtyDetatils', self.$paramsConvert({
      userId: self.$store.state.user.user.user.userId,
      activityId: self.activityId
    }))
    self.setData(res.data.data)
  } else { // 未报名
    let res = await axios.post('/mscs/activity/findActivityContentById', self.$paramsConvert({activityId: self.activityId}))
    if (res.data.code === 1) {
      self.activity = res.data.data.data
    }
    self.addItem()
  }
}

export default {
  name: "eventform",
  title: "活动报名",
  props: {
    activityId: {}
  },
  data () {
    return {
      activity: {},
      participants: [],
      fotter: true,
      winHie: 0,
      dialogVisible: false,
      loading: false
    }
  },
  mounted () {
    this.winHie = document.documentElement.clientHeight
    window.onresize = this.reHeight
    gen(this).then(() => {}).catch((error) => {
      this.$message({
        // duration: 0,
        showClose: true,
        message: `错误信息：${error}`,
        type: 'error'
      })
    })
  },
  methods: {
    confirm () {
      this.$validator.validate().then((result) => {
        if (result) {
          let obj = {}
           obj.activityId = this.activity.activityId // 活动id
           obj.activityName = this.activity.activityTitle // 活动名称
           obj.mscsActivitySignPeople = this.participants

           obj.mscsActivitySignPeople.forEach(item => {
             item.activityId = this.activity.activityId // 活动id
             item.activityName = this.activity.activityTitle // 活动名称
             item.signUpStatus = 'ALREADY'
           })
          // obj.userId  = getuser().data.user.userId
          obj.userId = this.$store.state.user.user.user.userId
          obj.saveSubmit = 'SUBMIT'
          obj.signUpStatus = 'ALREADY' // 报名状态 NOT 未报名; ALREADY 已报名; CANCEL 已取消
          // console.log('活动报名-->', obj)
          this.loading = true
          axios.post('/mscs/activity/activitySign', obj).then((res) => {
            // console.log('vip-res-->', res)
            if (res.data.code === 1) {
              // this.corssBack()
              this.$router.replace({name: 'formsuccess'})
            } else {
              this.$codeError(res)
            }
          }).catch((error) => {
            if (error.response.status === 401) {
              this.$message({
                message: `权限错误需要重新登录`,
                type: 'error'
              })
              Cookies.remove('user')
              this.$router.push({name: 'login', params: {activityId: this.activity.activityId}})
            } else {
              this.$message({
                showClose: true,
                message: `错误信息：${error}`,
                type: 'error'
              })
            }
          }).finally(() => {
            this.loading = false
          })
        } else {
          this.$alert('信息填写不完整，请填写完整', '提示', {
            confirmButtonText: '完善内容'
          })
        }
      })
    },
    setData (rows) {
      document.title = '报名详情'
      this.participants = rows.mscsActivitySignPeople
    },
    addItem () {
      this.participants.push({
        name: '',
        phone: '',
        remark: '',
        isSign: 'NO'
      })
    },
    deleteItem (item, index) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.participants.splice(index, 1)
      })
    },
    reHeight () {
      let height = document.documentElement.clientHeight
      if (height === this.winHie) { // 高度等于全屏高度，软键盘没有弹起
        this.fotter = true
      } else {
        this.fotter = false
      }
    },
  }
}
</script>
<style lang="scss">
  .is-sign {
    .weui-cell {
      border: none!important;
      padding: 5px 20px!important;
      .list-group-item {
        border: none!important;
      }
    }

  }
  .add-sign {
    margin-top: 25px;
    border: 1px dashed #94C05A;
    color: #94C05A;
    font-size: 18px;
    padding: 6px;
    cursor: pointer;
  }

</style>
